<template>
  <div class="auditCmpt">
    <!-- {{carrier}} -->
    <!-- 查询表单 -->
    <div class="form-baseinfo">
      <LPSearchBar
        :key="searchKey"
        v-model="searchModel"
        :search-data="searchData"
        label-width="100px"
        @handleSearchSubmit="handleSearchSubmit"
        @handleSearchReset="handleSearchReset"
      />
    </div>
    <!-- 表格列表 -->
    <div class="form-baseinfo">
      <div class="btn_area">
        <el-button size="medium" type="primary" @click="exportInfo">导出数据</el-button>
      </div>
      <LPTablePage
        :show-index="true"
        :show-indexfixed="false"
        :table-data="tableData"
        :table-column="tableColumn"
        :total="total"
        :current-page="currentPage"
        align="center"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      >
        <template slot="coupons" slot-scope="{ row }">
          <div v-if="row.couponList.length > 1">
            <!-- <div v-for="(item, index) in row.couponList" :key="index"> -->
            <el-link type="primary" @click="couponDialogShow(row.couponList)"> 查看详情</el-link>
            <!-- </div> -->
          </div>
          <div v-else-if="row.couponList.length == 1">
            <el-link type="primary" @click="goToCouponManage(row.couponList[0].couponId, false)">{{
              row.couponList[0].name
            }}</el-link>
          </div>
        </template>
      </LPTablePage>
    </div>
    <el-dialog
      class=""
      title="优惠券名称详情"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="dialogClose1"
      :visible.sync="couponDialog"
      width="1080px"
    >
      <LPTablePage
        :show-page="false"
        :show-index="false"
        index-label="序号"
        :show-indexfixed="true"
        :table-data="couponDetailTable"
        :table-column="couponDetailTableColumn"
        max-height="400"
        align="center"
      >
        <template slot="name" slot-scope="{ row }">
          <div>
            <el-link type="primary" @click="goToCouponManage(row.couponId, true)">{{ row.name }}</el-link>
          </div>
        </template>
      </LPTablePage>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogClose1">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getMonthSupplerMaterial } from '@/api/LaborProtection/monthlyStockSummary'
import { GetExcelMonthSupplerMaterial } from '@/api/LaborProtection/export'
import { download, parseTime } from '@/utils/lpUtils'
import LPTablePage from '@/components/LPTablePage/index.vue'
import LPSearchBar from '@/components/LPSearchBar/index.vue'

export default {
  name: 'StockSummary',
  components: { LPTablePage, LPSearchBar },
  data() {
    return {
      searchModel: {},
      searchData: [
        { label: '', placeholder: '物料/小类编码', prop: 'MaterialCode' },
        { label: '', placeholder: '物料/小类名称', prop: 'MaterialName' },
        { label: '', prop: 'StartOrderTime', type: 'monthrange' }
      ],
      // 列表数据
      tableData: [],
      // 表格字段
      tableColumn: [
        { label: '月份', prop: 'dateTime' },
        { label: '物料/小类编号', prop: 'materialCode' },
        { label: '物料/小类名称', prop: 'materialName' },
        { label: '备货数量', prop: 'count' },
        { label: '关联优惠券明细', prop: 'coupons', render: true }
      ],
      searchKey: '',
      couponDialog: false,
      couponDetailTable: [],
      couponDetailTableColumn: [{ label: '优惠券名称', prop: 'name', render: true }],
      total: 0,
      currentPage: 1,
      pageSize: 10
    }
  },
  mounted() {
    this.searchModel.StartOrderTime = [parseTime(new Date(), '{y}-{m}'), parseTime(new Date(), '{y}-{m}')]
    this.searchKey = new Date().getTime()
    const query = this.$route.query.data
    console.log(query)
    if (query == '' || query == null || query == undefined) {
    } else {
      this.couponDialogShow(query)
    }
    this.getList()
  },
  methods: {
    couponDialogShow(data) {
      this.couponDialog = true
      this.couponDetailTable = data
    },
    dialogClose1() {
      this.couponDialog = false
      this.couponDetailTable = []
    },
    goToCouponManage(id, flag) {
      const queryData = {
        id: id,
        back: '/laborProtection/monthlyStockSummary'
      }

      // if (flag) {
      //   queryData.backData = this.couponDetailTable
      // }

      this.$router.push({
        path: '/laborProtection/couponManage',
        query: {
          data: JSON.stringify(queryData)
        }
      })
    },
    insertData() {
      this.$router.push({
        path: '/laborProtection/order/returnOrderManage/insertReOrder'
      })
    },
    // 查询按钮
    handleSearchSubmit() {
      this.currentPage = 1
      this.getList()
    },
    // 重置按钮
    handleSearchReset() {
      this.searchModel.StartOrderTime = [parseTime(new Date(), '{y}-{m}'), parseTime(new Date(), '{y}-{m}')]
      this.searchKey = new Date().getTime()
      this.handleSearchSubmit()
    },
    handleSizeChange(v) {
      this.pageSize = v
      this.currentPage = 1
      this.getList()
    },
    handleCurrentChange(v) {
      this.currentPage = v
      this.getList()
    },
    exportInfo() {
      const params = {
        ...this.searchModel
      }
      if (typeof this.searchModel.StartOrderTime !== 'undefined') {
        params.StartTime = parseTime(this.searchModel.StartOrderTime[0])
        params.EndTime = parseTime(this.searchModel.StartOrderTime[1])
        this.$delete(params, 'StartOrderTime')
      }
      GetExcelMonthSupplerMaterial(params).then((res) => {
        download(res, '月备货报表')
      })
    },
    getList() {
      const params = {
        ...this.searchModel,
        SkipCount: this.currentPage,
        MaxResultCount: this.pageSize
      }

      if (typeof this.searchModel.StartOrderTime !== 'undefined') {
        params.StartTime = parseTime(this.searchModel.StartOrderTime[0])
        params.EndTime = parseTime(this.searchModel.StartOrderTime[1])
        this.$delete(params, 'StartOrderTime')
      } else {
        return this.$message.error('请选择查询时间')
      }
      getMonthSupplerMaterial(params).then((res) => {
        if (!res.error) {
          this.tableData = res.items
          this.total = res.totalCount
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.auditCmpt {
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
  .form-baseinfo:first-child {
    margin: 20px, 0, 20px, -10px;
    border-radius: 3px;
  }
}
.btn_area {
  background-color: #fff;
  padding: 0.2rem;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
::v-deep .search-bar input.el-input__inner {
  width: 2rem;
}
</style>
